<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XMLHttpRequest_查询参数</title>
</head>

<body>
  <p class="city-p"></p>
  <script>

    // 查询参数 利用&,符号分割的键值对列表     对象=》 查询参数

    /**
     * 目标：使用XHR携带查询参数，展示某个省下属的城市列表
    */

    const xhr = new XMLHttpRequest()


    const obj = {
      pname: '湖南省',
      cname: '长沙市'
    }

    const queryStr = new URLSearchParams(obj)

    xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryStr}`)
    xhr.addEventListener('loadend', (e) => {
      console.log(e.target.responseText);   //以这种方式
      console.log(xhr.response);   //还能利用 事件对象查看
      const data = JSON.parse(xhr.response).list
      document.querySelector('.city-p').innerHTML = data
    })
    xhr.send()












    // const xhr = new XMLHttpRequest()
    // xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=湖南省')
    // xhr.addEventListener('loadend', () => {
    //   console.log(xhr.response);   //收到的是JSON格式的对象
    //   const data = JSON.parse(xhr.response)
    //   console.log(data.list);
    //   document.querySelector('.city-p').innerHTML = data.list
    // })

    // xhr.send()

  </script>
</body>

</html>